<template>
  <div>
    <a-form
      @finish="handleSubmit"
      ref="formRef"
      :model="formData"
      layout="inline"
    >
      <a-form-item name="name" label="姓名">
        <a-input v-model:value="formData.name" />
      </a-form-item>
      <a-form-item name="age" label="年龄">
        <a-input v-model:value="formData.age" />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button @click="search">搜索</a-button>
          <a-button html-type="submit">搜索2</a-button>
          <a-button @click="reset">重置</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup>
import { ref } from "vue";

const formRef = ref();
// 通过form自带的submit，来触发finish自定义事件
const handleSubmit = (values) => {
  console.log("通过submit按钮来提交", values);
};
// 直接通过按钮的点击事件，来拿到数据
const search = () => {
  console.log(formData.value);
};
const reset = () => {
  //   formData.value = {};
  formRef.value.resetFields();
};
const formData = ref({ name: "", age: "" });
</script>
<style></style>
